<template>
  <div ref="mapContainer" class="tencent-map-container">
    <ZoomControl
      v-if="showZoomControl"
      :is-map-ready="isMapReady"
      :current-zoom="currentZoom"
      :show-zoom-level="showZoomLevel"
      @zoom-in="handleZoomIn"
      @zoom-out="handleZoomOut"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { useTencentMap } from './useTencentMap'
import ZoomControl from './ZoomControl.vue'

interface Props {
  // 地图中心点
  center?: { lat: number; lng: number }
  // 缩放级别
  zoom?: number
  // 地图容器样式
  mapStyle?: string
  // 是否显示行政区划边界
  showDistrictBoundary?: boolean
  // 是否启用拖拽
  enableDrag?: boolean
  // 是否启用缩放
  enableZoom?: boolean
  // 是否启用点击
  enableClick?: boolean
  // 是否启用双击缩放
  enableDoubleClickZoom?: boolean
  // 是否启用滚轮缩放
  enableScrollWheelZoom?: boolean
  // 是否显示缩放控件
  showZoomControl?: boolean
  // 是否显示缩放级别
  showZoomLevel?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  center: () => ({ lat: 39.908823, lng: 116.397470 }), // 默认北京
  zoom: 5,
  mapStyle: 'dark',
  showDistrictBoundary: true,
  enableDrag: true,
  enableZoom: true,
  enableClick: true,
  enableDoubleClickZoom: true,
  enableScrollWheelZoom: true,
  showZoomControl: true,
  showZoomLevel: true
})

interface Emits {
  click: [event: any]
  drag: [event: any]
  dragStart: [event: any]
  dragging: [event: any]
  zoom: [event: any]
  ready: [map: any]
  error: [error: any]
  districtClick: [district: any]
}

const emit = defineEmits<Emits>()

const mapContainer = ref<HTMLDivElement>()
const { initMap, destroyMap, map, isMapReady, zoomIn, zoomOut, getZoom, getCenter, getBounds, setDraggable, getDragInfo, fitBounds, setDistrictClickCallback, setMapClickCallback, getClickInfo } = useTencentMap()
const currentZoom = ref(props.zoom)

onMounted(async () => {
  if (mapContainer.value) {
    try {
      await initMap(mapContainer.value, {
        center: props.center,
        zoom: props.zoom,
        mapStyle: props.mapStyle,
        showDistricts: props.showDistrictBoundary,
        enableDrag: props.enableDrag,
        enableZoom: props.enableZoom
      })
      
      // 绑定事件
      if (map.value) {
        // 设置点击事件回调
        setMapClickCallback((event: any) => {
          const clickInfo = getClickInfo(event)
          emit('click', clickInfo)
        })

        setDistrictClickCallback((data: any) => {
          emit('districtClick', data)
        })

        // 点击事件
        if (props.enableClick) {
          map.value.on('click', (event: any) => {
            const clickInfo = getClickInfo(event)
            if (clickInfo) {
              emit('click', clickInfo)
            }
          })
        }
        
        // 拖拽事件
        if (props.enableDrag) {
          map.value.on('dragstart', (event: any) => {
            const dragInfo = getDragInfo(event)
            emit('dragStart', dragInfo)
          })
          
          map.value.on('drag', (event: any) => {
            const dragInfo = getDragInfo(event)
            emit('dragging', dragInfo)
          })
          
          map.value.on('dragend', (event: any) => {
            const dragInfo = getDragInfo(event)
            emit('drag', dragInfo)
          })
        }
        
        // 缩放事件
        if (props.enableZoom) {
          map.value.on('zoom', (event: any) => {
            emit('zoom', event)
          })
        }
        
        // 地图准备就绪事件
        emit('ready', map.value)
        
        // 监听缩放变化
        map.value.on('zoom', () => {
          currentZoom.value = getZoom()
        })
        
        // 初始化当前缩放级别
        currentZoom.value = getZoom()
      }
    } catch (error) {
      console.error('腾讯地图初始化失败:', error)
      emit('error', error)
    }
  }
})

// 缩放控件事件处理
const handleZoomIn = () => {
  zoomIn()
}

const handleZoomOut = () => {
  zoomOut()
}

onUnmounted(() => {
  destroyMap()
})

// 暴露地图实例给父组件
defineExpose({
  map
})
</script>

<style lang="less" scoped>
.tencent-map-container {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>